<template>
  <div class="choice">
    <van-nav-bar
      title="单选题"
      left-text="返回"
      right-text="答案"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="content">
      <h1 class="title">{{ activeIndex + 1 }}.{{ question.title }}</h1>
      <van-radio-group v-model="radio" class="options">
        <van-radio
          :name="index"
          v-for="(item, index) in question.options"
          :key="index"
          class="option-item"
        >
          {{ item }}</van-radio
        >
      </van-radio-group>
      <van-row
        type="flex"
        align="center"
        justify="space-between"
        class="btn-wrap"
      >
        <van-button type="primary"  @click="goPrev"
          >上一题</van-button
        >
        <van-button type="primary"  @click="goNext"
          >下一题</van-button
        >
      </van-row>
      <div class="answer" v-show="isShowAnswer">{{ question.answer }}</div>
    </div>
  </div>
</template>

<script>
import { list } from "./data";
import { setStore, getStore, removeStore } from "@/util/index";
const radioList = ["A", "B", "C", "D"];
export default {
  name: "choice",
  computed: {
    question() {
      return this.list[this.activeIndex];
    },
  },
  data() {
    return {
      activeIndex: 0,
      list: list,
      isShowAnswer: false,
      radio: "",
      mistakesList: [],
    };
  },
  watch: {
    activeIndex(newVal) {
      setStore("activeIndex", newVal);
    },
    mistakesList(newVal) {
      setStore("mistakesList", this.mistakesList);
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.isShowAnswer = true;
    },
    goPrev() {
      if (this.activeIndex == 0) {
        this.$toast("没有上一题");
      } else {
        this.activeIndex--;
        this.radio = "";
        this.isShowAnswer = false;
      }
    },
    goNext() {
      if (this.radio === "") {
        this.$toast("请选择");
        return;
      }
      if (this.isShowAnswer) {
        if (this.activeIndex >= this.list.length - 1) {
          this.$dialog
            .alert({
              title: "提示",
              message: "已经是最后一题了",
            })
            .then(() => {
              this.$router.back();
            });
        } else {
          this.activeIndex++;
          this.radio = "";
          this.isShowAnswer = false;
        }
      } else {
        if (radioList[this.radio] == this.question.answer) {
          if (this.activeIndex >= this.list.length - 1) {
            this.$dialog
              .alert({
                title: "提示",
                message: "已经是最后一题了",
              })
              .then(() => {
                removeStore("activeIndex");
                this.$router.back();
              });
          } else {
            this.activeIndex++;
            this.radio = "";
            this.isShowAnswer = false;
          }
        } else {
          this.isShowAnswer = true;
          this.mistakesList.push(list[this.activeIndex]);
        }
      }
    },
    isGoOn() {
      let activeIndex = getStore("activeIndex");
      if (activeIndex) {
        this.$dialog
          .confirm({
            title: "请确认",
            message: "是否继续答题",
          })
          .then(() => {
            this.activeIndex = +activeIndex;
          })
          .catch(() => {
            removeStore("activeIndex");
          });
      }
    },
  },
  created() {
    let { type } = this.$route.query;
    if (type == 2) {
      // 错题本
      this.list = JSON.parse(getStore("mistakesList"));
    }else{
      this.isGoOn()
    }
  },
};
</script>
<style lang='less' scoped>
@import "./choice.less";
</style>